/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState } from 'react';
import { Empty, Space, Card, Row, Button, Divider, Checkbox, Pagination, Tag } from 'antd';
import { getRanString, platFormType } from '../utils';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import KbRefuseModal from '@/components/RefuseModal';
import { noop } from 'lodash';
import type { ApproveDataType } from '../../types/Common';

const TemCommonCard = (props: any) => {
  const {
    dataSource,
    resetSign,
    onPageChanges,
    onApprove,
    onRejact,
    onDrawBlack,
    pagination,
    hideBlack,
    pageType,
    svipStatus,
    pageKey,
  } = props;
  const [chooseAllStatus, setChooseAllStatus] = useState<boolean>(false);
  const [chooseList, setChooseList] = useState<string[]>([]);
  const [indeterminate, setIndeterminate] = useState(false);

  useEffect(() => {
    if (resetSign) {
      setChooseAllStatus(false);
      setChooseList([]);
      setIndeterminate(false);
    }
  }, [resetSign]);

  useEffect(() => {
    setIndeterminate(!!chooseList.length && chooseList.length < dataSource.length);
    setChooseAllStatus(chooseList.length == dataSource.length);
  }, [chooseList.length, dataSource.length]);

  const onClickSingle = (item: ApproveDataType, event: CheckboxChangeEvent) => {
    const status = event.target.checked;
    if (status) {
      chooseList.push(item.ssid);
      setChooseList([...chooseList]);
    } else {
      setChooseList([...chooseList.filter((itemm: any) => itemm != item.ssid)]);
    }
  };

  const onClickChooseAll = (event: CheckboxChangeEvent) => {
    const status = event.target.checked;
    setChooseAllStatus(status);
    setIndeterminate(false);
    if (status) {
      setChooseList(dataSource.map((item: ApproveDataType) => item.ssid));
    } else {
      setChooseList([]);
    }
  };

  const onPageChange = (event: number) => {
    onPageChanges({ current: event });
  };

  const onClickAllProve = () => {
    const list = chooseList.map((item) =>
      dataSource.find((itemm: ApproveDataType) => itemm.ssid == item),
    );
    onApprove(list);
  };

  return dataSource ? (
    <>
      {dataSource.length ? (
        <>
          {dataSource.map((item: ApproveDataType) => (
            <div key={getRanString()}>
              <Divider />
              <Space align='baseline'>
                <Checkbox
                  onChange={onClickSingle.bind(null, item)}
                  checked={chooseList.includes(item.ssid)}
                />
                <Space direction='vertical' size='middle'>
                  <Row>
                    申请人：
                    <Space>
                      <span style={{ color: item.cm_phone_color || '' }}>
                        {item.phone || item.cm_phone}
                      </span>
                      <span>{platFormType[item.source] || item.user_type}</span>
                      {svipStatus ? <Tag color='blue'>超V营销信息</Tag> : null}
                      {item.ai_label && item.ai_label !== 'approved' ? (
                        <Tag color={item.ai_label === 'reject' ? '#ff0000' : '#ff8e00'}>
                          {item.ai_label === 'reject' ? 'AI拒绝' : ' AI可疑'}
                        </Tag>
                      ) : null}
                    </Space>
                  </Row>
                  <Row>申请日期：{item.create_time || item.apply_time}</Row>
                  <Row>
                    {pageType || '模版'}内容：
                    {item.seniative ? (
                      <Space size={2}>
                        {item.seniative.map((text) => (
                          <span
                            style={{
                              color: text == item.sensitive_word ? 'red' : '',
                            }}
                            key={getRanString()}
                          >
                            {text}
                          </span>
                        ))}
                      </Space>
                    ) : (
                      item.sign || item.content
                    )}
                  </Row>
                  <Space>
                    <Button type='primary' onClick={onApprove.bind(null, [item])}>
                      通过审核
                    </Button>
                    <Button onClick={onRejact.bind(null, item)}>拒绝</Button>
                    {svipStatus ||
                      (!hideBlack && (
                        <Button onClick={onDrawBlack.bind(null, item)}>拒绝并拉黑</Button>
                      ))}
                    {pageKey === '1' || pageKey === '8' ? (
                      <KbRefuseModal
                        label='确定扣钱不发？'
                        api='/Shield/adminBlack'
                        callback={onPageChanges}
                        formData={{
                          kb_id: item.kb_id,
                          cm_id: item.cm_app_id,
                          cm_phone: item.cm_phone,
                          tplId: item.tid,
                        }}
                      >
                        <Button>扣钱不发</Button>
                      </KbRefuseModal>
                    ) : null}
                  </Space>
                </Space>
              </Space>
            </div>
          ))}
          <Divider />
          <Space align='center' wrap>
            <Checkbox
              indeterminate={indeterminate}
              checked={chooseAllStatus}
              onChange={onClickChooseAll}
            >
              全选/取消
            </Checkbox>
            {chooseList.length > 1 && (
              <Button onClick={onClickAllProve} type='primary'>
                批量通过
              </Button>
            )}
            <Pagination onChange={onPageChange} {...pagination} hideOnSinglePage simple />
            <span>共 {pagination.total || '--'} 条</span>
          </Space>
        </>
      ) : (
        <Card>
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        </Card>
      )}
    </>
  ) : (
    <></>
  );
};

TemCommonCard.defaultProps = {
  //   dataSource: [],
  onPageChanges: noop,
  onApprove: noop,
  onRejact: noop,
  onDrawBlack: noop,
  pagination: {},
};

export default TemCommonCard;
